பயன்பாடுகளுக்கு இடையேயான தகவல்தொடர்பில் தேர்ச்சி பெறுதல்: ஃபிரன்ட்எண்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ்

நவீன வலை உருவாக்கத் துறையில், மைக்ரோ-ஃபிரன்ட்எண்ட்கள் ஒரு சக்திவாய்ந்த கட்டமைப்பு வடிவமாக உருவெடுத்துள்ளன. அவை குழுக்களை பயனர் இடைமுகத்தின் சுயாதீனமான பகுதிகளை உருவாக்க மற்றும் வரிசைப்படுத்த அனுமதிக்கின்றன, இது சுறுசுறுப்பு, அளவிடுதல் மற்றும் குழு சுயாட்சியை வளர்க்கிறது. இருப்பினும், இந்த சுயாதீனமான பயன்பாடுகள் ஒன்றுக்கொன்று தொடர்பு கொள்ள வேண்டியிருக்கும் போது ஒரு முக்கியமான சவால் எழுகிறது. ஒரு வலுவான பொறிமுறை இல்லாமல், மைக்ரோ-ஃபிரன்ட்எண்ட்கள் தனிமைப்படுத்தப்பட்ட தீவுகளாக மாறக்கூடும், இது பயனர்கள் எதிர்பார்க்கும் ஒருங்கிசைந்த பயனர் அனுபவத்தைத் தடுக்கிறது. இங்குதான் ஃபிரன்ட்எண்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ் devreye girer, பயன்பாடுகளுக்கு இடையேயான தகவல்தொடர்புக்கான மத்திய நரம்பு மண்டலமாக செயல்படுகிறது.

மைக்ரோ-ஃபிரன்ட்எண்ட் நிலப்பரப்பைப் புரிந்துகொள்ளுதல்

நிகழ்வு பஸ்ஸுக்குள் செல்வதற்கு முன், மைக்ரோ-ஃபிரன்ட்எண்ட்களின் சூழலை சுருக்கமாக மீண்டும் நிறுவுவோம். ஒரு பெரிய இ-காமர்ஸ் தளத்தை கற்பனை செய்து பாருங்கள். ஒரு ஒற்றை, மாபெரும் ஃபிரன்ட்எண்ட் பயன்பாட்டிற்கு பதிலாக, நாம் கொண்டிருக்கலாம்:

• ஒரு தயாரிப்பு பட்டியல் மைக்ரோ-ஃபிரன்ட்எண்ட்: தயாரிப்பு பட்டியல்கள், தேடல் மற்றும் வடிகட்டுதலைக் காண்பிப்பதற்குப் பொறுப்பு.
• ஒரு ஷாப்பிங் கார்ட் மைக்ரோ-ஃபிரன்ட்எண்ட்: கார்ட்டில் சேர்க்கப்பட்ட பொருட்கள், அளவுகள் மற்றும் செக்அவுட் தொடக்கத்தை நிர்வகிக்கிறது.
• ஒரு பயனர் சுயவிவர மைக்ரோ-ஃபிரன்ட்எண்ட்: பயனர் அங்கீகாரம், ஆர்டர் வரலாறு மற்றும் தனிப்பட்ட விவரங்களைக் கையாளுகிறது.
• ஒரு பரிந்துரை இயந்திர மைக்ரோ-ஃபிரன்ட்எண்ட்: பயனர் நடத்தையின் அடிப்படையில் தொடர்புடைய தயாரிப்புகளைப் பரிந்துரைக்கிறது.

இவற்றில் ஒவ்வொன்றும் வெவ்வேறு குழுக்களால் சுயாதீனமாக உருவாக்கப்பட்டு, வரிசைப்படுத்தப்பட்டு, பராமரிக்கப்படலாம். இது குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

• தொழில்நுட்ப பன்முகத்தன்மை: குழுக்கள் தங்கள் குறிப்பிட்ட மைக்ரோ-ஃபிரன்ட்எண்டிற்கு சிறந்த தொழில்நுட்ப அடுக்கைத் தேர்வு செய்யலாம்.
• குழு சுயாட்சி: வளர்ச்சி குழுக்கள் விரிவான ஒருங்கிணைப்பு இல்லாமல் சுயாதீனமாக வேலை செய்ய முடியும்.
• வேகமான வரிசைப்படுத்தல் சுழற்சிகள்: சிறிய, சுயாதீனமான வரிசைப்படுத்தல்கள் ஆபத்தைக் குறைத்து வேகத்தை அதிகரிக்கின்றன.
• அளவிடுதல்: தனிப்பட்ட மைக்ரோ-ஃபிரன்ட்எண்ட்களை தேவைக்கேற்ப அளவிடலாம்.

சவால்: பயன்பாடுகளுக்கு இடையேயான தகவல்தொடர்பு

சுயாதீனமான வளர்ச்சியின் அழகு ஒரு குறிப்பிடத்தக்க சவாலுடன் வருகிறது: இந்த தனித்தனி பயன்பாடுகள் ஒன்றுக்கொன்று எப்படி பேசுகின்றன? இந்த பொதுவான சூழ்நிலைகளைக் கவனியுங்கள்:

• ஒரு பயனர் ஷாப்பிங் கார்ட்டில் ஒரு பொருளைச் சேர்க்கும்போது, அந்தப் பொருள் இப்போது கார்ட்டில் உள்ளது என்பதைக் குறிக்க தயாரிப்பு பட்டியல் பார்வைக்குக் காட்ட வேண்டியிருக்கும் (எ.கா., ஒரு சரிபார்ப்புக் குறி).
• ஒரு பயனர் பயனர் சுயவிவர மைக்ரோ-ஃபிரன்ட்எண்ட் வழியாக உள்நுழையும்போது, மற்ற மைக்ரோ-ஃபிரன்ட்எண்ட்கள் (பரிந்துரை இயந்திரம் போன்றவை) உள்ளடக்கத்தைத் தனிப்பயனாக்க பயனரின் அங்கீகார நிலையை அறிய வேண்டியிருக்கும்.
• ஒரு பயனர் ஒரு கொள்முதல் செய்யும்போது, ஷாப்பிங் கார்ட் சரக்கு எண்ணிக்கையைப் புதுப்பிக்க தயாரிப்பு பட்டியலுக்கோ அல்லது புதிய ஆர்டர் வரலாற்றைப் பிரதிபலிக்க பயனர் சுயவிவரத்திற்கோ அறிவிக்க வேண்டியிருக்கும்.

மைக்ரோ-ஃபிரன்ட்எண்ட்களுக்கு இடையேயான நேரடித் தொடர்பு பெரும்பாலும் ஊக்கப்படுத்தப்படுவதில்லை, ஏனெனில் அது இறுக்கமான இணைப்பை உருவாக்குகிறது, இது மைக்ரோ-ஃபிரன்ட்எண்ட் கட்டமைப்பின் பல நன்மைகளை மறுக்கிறது. அவை தொடர்புகொள்வதற்கு தளர்வாக இணைக்கப்பட்ட, நெகிழ்வான மற்றும் அளவிடக்கூடிய ஒரு வழி நமக்குத் தேவை.

ஃபிரன்ட்எண்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ்ஸை அறிமுகப்படுத்துதல்

ஒரு நிகழ்வு பஸ், செய்தி பஸ் அல்லது பப்/சப் (வெளியீடு-சந்தா) அமைப்பு என்றும் அழைக்கப்படுகிறது, இது ஒரு பயன்பாட்டின் வெவ்வேறு பகுதிகளுக்கு இடையில் துண்டிக்கப்பட்ட தகவல்தொடர்பை செயல்படுத்தும் ஒரு வடிவமைப்பு முறை. மைக்ரோ-ஃபிரன்ட்எண்ட்களின் சூழலில், இது ஒரு மைய மையமாக செயல்படுகிறது, அங்கு பயன்பாடுகள் நிகழ்வுகளை வெளியிடலாம் மற்றும் பிற பயன்பாடுகள் இந்த நிகழ்வுகளுக்கு குழுசேரலாம்.

இதன் முக்கிய யோசனை எளிதானது:

• வெளியீட்டாளர்: ஒரு நிகழ்வை உருவாக்கி அதை பஸ்ஸில் ஒளிபரப்பும் ஒரு பயன்பாடு.
• சந்தாதாரர்: பஸ்ஸில் குறிப்பிட்ட நிகழ்வுகளைக் கேட்டு, அவை நிகழும்போது எதிர்வினையாற்றும் ஒரு பயன்பாடு.
• நிகழ்வு பஸ்: வெளியிடப்பட்ட நிகழ்வுகளை அனைத்து ஆர்வமுள்ள சந்தாதாரர்களுக்கும் வழங்குவதை எளிதாக்கும் இடைத்தரகர்.

இந்த முறை அப்சர்வர் பேட்டர்ன் உடன் நெருங்கிய தொடர்புடையது, இதில் ஒரு பொருள் (சப்ஜெக்ட்) அதன் சார்புடையவர்களின் (அப்சர்வர்கள்) பட்டியலைப் பராமரிக்கிறது மற்றும் பொதுவாக அவற்றின் முறைகளில் ஒன்றை அழைப்பதன் மூலம் எந்த நிலை மாற்றங்களையும் தானாகவே அவர்களுக்கு அறிவிக்கிறது.

மைக்ரோ-ஃபிரன்ட்எண்ட்களுக்கான ஒரு நிகழ்வு பஸ்ஸின் முக்கிய கோட்பாடுகள்

1. இணைப்பறுத்தல் (Decoupling): வெளியீட்டாளர்களும் சந்தாதாரர்களும் ஒருவருக்கொருவர் இருப்பதைப் பற்றி தெரிந்து கொள்ள வேண்டியதில்லை. அவர்கள் நிகழ்வு பஸ் மூலம் மட்டுமே தொடர்பு கொள்கிறார்கள்.
2. ஒத்திசைவற்ற தொடர்பு (Asynchronous Communication): நிகழ்வுகள் பொதுவாக ஒத்திசைவற்ற முறையில் செயலாக்கப்படுகின்றன, அதாவது வெளியீட்டாளர் சந்தாதாரர்கள் நிகழ்வைச் செயலாக்கி முடிக்கும் வரை காத்திருக்க வேண்டியதில்லை.
3. அளவிடுதல் (Scalability): மேலும் மைக்ரோ-ஃபிரன்ட்எண்ட்கள் சேர்க்கப்படும்போது, அவை ஏற்கனவே உள்ளவற்றை பாதிக்காமல் நிகழ்வுகளுக்கு குழுசேரலாம் அல்லது வெளியிடலாம்.
4. மையப்படுத்தப்பட்ட தர்க்கம் (நிகழ்வுகளுக்கு): பயன்பாட்டு தர்க்கம் விநியோகிக்கப்பட்டிருந்தாலும், நிகழ்வு கையாளும் பொறிமுறையானது பஸ் மூலம் மையப்படுத்தப்பட்டுள்ளது.

உங்கள் மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ்ஸை வடிவமைத்தல்

ஒரு மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ்ஸை செயல்படுத்துவதற்கு பல அணுகுமுறைகள் உள்ளன, ஒவ்வொன்றும் அதன் நன்மைகள் மற்றும் தீமைகளைக் கொண்டுள்ளன. தேர்வு பெரும்பாலும் உங்கள் பயன்பாட்டின் குறிப்பிட்ட தேவைகள், பயன்படுத்தப்படும் அடிப்படை தொழில்நுட்பங்கள் மற்றும் வரிசைப்படுத்தல் உத்தி ஆகியவற்றைப் பொறுத்தது.

1. குளோபல் நிகழ்வு உமிழ்ப்பான் (ஜாவாஸ்கிரிப்ட்)

ஒரே உலாவி சூழலில் (எ.கா., மாட்யூல் ஃபெடரேஷன் அல்லது iframe தொடர்பு போன்றவற்றைப் பயன்படுத்தி) வரிசைப்படுத்தப்பட்ட மைக்ரோ-ஃபிரன்ட்எண்ட்களுக்கு இது ஒரு பொதுவான மற்றும் ஒப்பீட்டளவில் நேரடியான அணுகுமுறை. ஒரு ஒற்றை, பகிரப்பட்ட ஜாவாஸ்கிரிப்ட் பொருள் நிகழ்வு பஸ்ஸாக செயல்படுகிறது.

செயல்படுத்தல் உதாரணம் (கருத்தியல் ஜாவாஸ்கிரிப்ட்)

நாம் ஒரு எளிய நிகழ்வு உமிழ்ப்பான் வகுப்பை உருவாக்கலாம்:

            class EventBus {
  constructor() {
    this.listeners = {};
  }

  subscribe(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
    return () => {
      this.unsubscribe(event, callback);
    };
  }

  unsubscribe(event, callback) {
    if (!this.listeners[event]) {
      return;
    }
    this.listeners[event] = this.listeners[event].filter(listener => listener !== callback);
  }

  publish(event, data) {
    if (!this.listeners[event]) {
      return;
    }
    this.listeners[event].forEach(callback => {
      try {
        callback(data);
      } catch (error) {
        console.error(`Error in event handler for ${event}:`, error);
      }
    });
  }
}

// In your main application shell or a shared utility file:
export const sharedEventBus = new EventBus();

            

              
                Copy
              
            
          

மைக்ரோ-ஃபிரன்ட்எண்ட்கள் அதை எவ்வாறு பயன்படுத்துகின்றன

தயாரிப்பு பட்டியல் மைக்ரோ-ஃபிரன்ட்எண்ட் (வெளியீட்டாளர்):

            import { sharedEventBus } from './sharedEventBus'; // Assuming sharedEventBus is imported correctly

function handleAddToCartButtonClick(productId) {
  // ... logic to add item to cart ...
  sharedEventBus.publish('itemAddedToCart', { productId: productId, quantity: 1 });
}

            

              
                Copy
              
            
          

ஷாப்பிங் கார்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் (சந்தாதாரர்):

            import { sharedEventBus } from './sharedEventBus'; // Assuming sharedEventBus is imported correctly

// When the cart component mounts or initializes
const subscription = sharedEventBus.subscribe('itemAddedToCart', (eventData) => {
  console.log('Item added to cart:', eventData);
  // Update cart UI, add item to internal state, etc.
  updateCartUI(eventData.productId, eventData.quantity);
});

// Remember to unsubscribe when the component unmounts to prevent memory leaks
// componentWillUnmount() { subscription(); }

            

              
                Copy
              
            
          

குளோபல் நிகழ்வு உமிழ்ப்பான்களுக்கான பரிசீலனைகள்

• வரம்பு (Scope): மைக்ரோ-ஃபிரன்ட்எண்ட்கள் ஒரே உலாவி சாளரத்தில் ஏற்றப்பட்டு, ஒரு குளோபல் வரம்பு அல்லது ஒரு பொதுவான மாட்யூல் அமைப்பைப் (வெப்பக்கின் மாட்யூல் ஃபெடரேஷன் போன்றவை) பகிரும்போது இந்த அணுகுமுறை நன்றாக வேலை செய்கிறது.
• நினைவக கசிவுகள் (Memory Leaks): நினைவக கசிவுகளைத் தவிர்க்க மைக்ரோ-ஃபிரன்ட்எண்ட் கூறுகள் நீக்கப்படும்போது சரியான சந்தா நீக்க பொறிமுறைகளை செயல்படுத்துவது முக்கியம்.
• நிகழ்வு பெயரிடும் மரபுகள் (Event Naming Conventions): மோதல்களைத் தடுக்க மற்றும் பராமரிப்பை உறுதிசெய்ய நிகழ்வுகளுக்கு தெளிவான பெயரிடும் மரபுகளை நிறுவவும். உதாரணமாக, [micro-frontend-name]:eventName போன்ற ஒரு முன்னொட்டைப் பயன்படுத்தவும்.
• தரவு அமைப்பு (Data Structure): நிகழ்வுகளுக்கு நிலையான தரவு கட்டமைப்புகளை வரையறுக்கவும்.

2. தனிப்பயன் நிகழ்வுகள் மற்றும் DOM அனுப்புதல்

மற்றொரு உலாவி-சொந்த அணுகுமுறை DOM-ஐ ஒரு தகவல் தொடர்பு சேனலாகப் பயன்படுத்துகிறது. மைக்ரோ-ஃபிரன்ட்எண்ட்கள் ஒரு பகிரப்பட்ட DOM உறுப்பில் (எ.கா., `window` பொருள் அல்லது ஒரு நியமிக்கப்பட்ட கொள்கலன் உறுப்பு) தனிப்பயன் நிகழ்வுகளை அனுப்பலாம், மேலும் பிற மைக்ரோ-ஃபிரன்ட்எண்ட்கள் இந்த நிகழ்வுகளைக் கேட்கலாம்.

செயல்படுத்தல் உதாரணம் (கருத்தியல் ஜாவாஸ்கிரிப்ட்)

தயாரிப்பு பட்டியல் மைக்ரோ-ஃபிரன்ட்எண்ட் (வெளியீட்டாளர்):

            
function handleAddToCartButtonClick(productId) {
  const event = new CustomEvent('microfrontend:itemAddedToCart', {
    detail: { productId: productId, quantity: 1 }
  });
  window.dispatchEvent(event);
}

            

              
                Copy
              
            
          

ஷாப்பிங் கார்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் (சந்தாதாரர்):

            
const handleItemAdded = (event) => {
  console.log('Item added to cart:', event.detail);
  updateCartUI(event.detail.productId, event.detail.quantity);
};

window.addEventListener('microfrontend:itemAddedToCart', handleItemAdded);

// Remember to remove the listener when the component unmounts
// window.removeEventListener('microfrontend:itemAddedToCart', handleItemAdded);

            

              
                Copy
              
            
          

தனிப்பயன் நிகழ்வுகளுக்கான பரிசீலனைகள்

• உலாவி இணக்கத்தன்மை (Browser Compatibility): `CustomEvent` பரவலாக ஆதரிக்கப்படுகிறது, ஆனால் அதைச் சரிபார்ப்பது எப்போதும் நல்லது.
• தரவு பரிமாற்ற வரம்புகள் (Data Transfer Limits): `CustomEvent`-இன் `detail` பண்பு தன்னிச்சையான வரிசைப்படுத்தக்கூடிய தரவை மாற்ற முடியும்.
• குளோபல் நேம்ஸ்பேஸ் மாசுபாடு (Global Namespace Pollution): `window`-இல் நிகழ்வுகளை அனுப்புவது கவனமாக நிர்வகிக்கப்படாவிட்டால் பெயரிடும் மோதல்களுக்கு வழிவகுக்கும்.
• செயல்திறன் (Performance): மிக அதிக அளவிலான நிகழ்வுகளுக்கு, இது ஒரு பிரத்யேக நிகழ்வு உமிழ்ப்பானுடன் ஒப்பிடும்போது மிகவும் செயல்திறன் மிக்க தீர்வாக இருக்காது.

3. செய்தி வரிசைகள் அல்லது வெளிப்புற தரகர்கள் (மேலும் சிக்கலான சூழ்நிலைகளுக்கு)

வெவ்வேறு உலாவி சூழல்களில் இயங்கக்கூடிய மைக்ரோ-ஃபிரன்ட்எண்ட்களுக்கு (எ.கா., வெவ்வேறு மூலங்களிலிருந்து வரும் iframes), அல்லது உங்களுக்கு உத்தரவாதமான விநியோகம், செய்தி நிலைத்தன்மை அல்லது சர்வர் பக்க கூறுகளுக்கு ஒளிபரப்புதல் போன்ற வலுவான அம்சங்கள் தேவைப்பட்டால், நீங்கள் வெளிப்புற செய்தி வரிசை அமைப்புகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளலாம்.

உதாரணங்கள் περιλαμβάνουν:

• வெப்சாக்கெட்டுகள் (WebSockets): நிகழ்நேர, இருவழித் தகவல்தொடர்புக்கு.
• சர்வர்-அனுப்பிய நிகழ்வுகள் (SSE): ஒருவழி சர்வர்-டு-கிளையன்ட் தகவல்தொடர்புக்கு.
• பிரத்யேக செய்தி தரகர்கள் (Dedicated Message Brokers): RabbitMQ, Apache Kafka, அல்லது கிளவுட் அடிப்படையிலான தீர்வுகள் (AWS SQS/SNS, Google Cloud Pub/Sub) போன்றவை.

செயல்படுத்தல் உதாரணம் (கருத்தியல் - வெப்சாக்கெட்டுகள்)

ஒரு பின்தள வெப்சாக்கெட் சர்வர் மைய தரகராக செயல்படுகிறது.

தயாரிப்பு பட்டியல் மைக்ரோ-ஃபிரன்ட்எண்ட் (வெளியீட்டாளர்):

            
// Assuming a WebSocket connection is established and managed globally
function handleAddToCartButtonClick(productId) {
  if (websocketConnection.readyState === WebSocket.OPEN) {
    websocketConnection.send(JSON.stringify({
      event: 'itemAddedToCart',
      data: { productId: productId, quantity: 1 }
    }));
  }
}

            

              
                Copy
              
            
          

ஷாப்பிங் கார்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் (சந்தாதாரர்):

            
// Assuming a WebSocket connection is established and managed globally
websocketConnection.onmessage = (event) => {
  const message = JSON.parse(event.data);
  if (message.event === 'itemAddedToCart') {
    console.log('Item added to cart (from WS):', message.data);
    updateCartUI(message.data.productId, message.data.quantity);
  }
};

            

              
                Copy
              
            
          

வெளிப்புற தரகர்களுக்கான பரிசீலனைகள்

• உள்கட்டமைப்பு மேல்நிலைச் செலவு (Infrastructure Overhead): ஒரு தனி சேவையை அமைத்து நிர்வகிக்க வேண்டும்.
• தாமதம் (Latency): தகவல்தொடர்பு பொதுவாக ஒரு சர்வர் வழியாகச் செல்கிறது, இது தாமதத்தை அறிமுகப்படுத்தலாம்.
• சிக்கலானது (Complexity): உலாவிக்குள் இருக்கும் தீர்வுகளை விட அமைப்பதற்கும் நிர்வகிப்பதற்கும் மிகவும் சிக்கலானது.
• அளவிடுதல் மற்றும் நம்பகத்தன்மை (Scalability & Reliability): பெரும்பாலும் அதிக அளவிடுதல் மற்றும் நம்பகத்தன்மை உத்தரவாதங்களை வழங்குகிறது.
• குறுக்கு-மூல தொடர்பு (Cross-Origin Communication): வெவ்வேறு மூலங்களிலிருந்து வரும் iframes-க்கு அவசியம்.

ஒரு மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ்ஸை செயல்படுத்துவதற்கான சிறந்த நடைமுறைகள்

தேர்ந்தெடுக்கப்பட்ட செயலாக்கத்தைப் பொருட்படுத்தாமல், சிறந்த நடைமுறைகளைப் பின்பற்றுவது ஒரு வலுவான மற்றும் பராமரிக்கக்கூடிய அமைப்பை உறுதி செய்யும்.

1. நிகழ்வுகளுக்கு ஒரு தெளிவான ஒப்பந்தத்தை வரையறுக்கவும்

ஒவ்வொரு நிகழ்விற்கும் நன்கு வரையறுக்கப்பட்ட கட்டமைப்பு இருக்க வேண்டும். இதில் அடங்குவன:

• நிகழ்வின் பெயர் (Event Name): ஒரு தனித்துவமான மற்றும் விளக்கமான அடையாளங்காட்டி.
• பேலோட் கட்டமைப்பு (Payload Structure): நிகழ்வு கொண்டு செல்லும் தரவின் வடிவம் மற்றும் வகைகள்.

உதாரணம்:

நிகழ்வின் பெயர்: userProfile:authenticated

பேலோட்:

            {
  "userId": "abc-123",
  "timestamp": "2023-10-27T10:30:00Z"
}

            

              
                Copy
              
            
          

2. பெயரிடும் மரபுகளை நிறுவுதல்

பெயர் மோதல்களைத் தவிர்க்க, குறிப்பாக பெரிய மைக்ரோ-ஃபிரன்ட்எண்ட் கட்டமைப்புகளில், ஒரு நிலையான பெயரிடும் உத்தியை செயல்படுத்தவும். முன்னொட்டுகள் மிகவும் பரிந்துரைக்கப்படுகின்றன.

• வரம்பு அடிப்படையிலான முன்னொட்டுகள்: [microfrontend-name]:[eventName] (எ.கா., catalog:productViewed, cart:itemRemoved)
• களம் அடிப்படையிலான முன்னொட்டுகள்: [domain]:[eventName] (எ.கா., auth:userLoggedIn, orders:orderPlaced)

3. சரியான சந்தா நீக்கத்தை உறுதி செய்தல்

நினைவக கசிவுகள் ஒரு பொதுவான ஆபத்து. ஒரு கூறு அல்லது மைக்ரோ-ஃபிரன்ட்எண்ட் செயலிழந்தவுடன், அதைப் பதிவுசெய்த கேட்பவர்கள் அகற்றப்படுவதை எப்போதும் உறுதிப்படுத்தவும். கூறுகள் மாறும் வகையில் உருவாக்கப்பட்டு அழிக்கப்படும் ஒற்றைப் பக்க பயன்பாடுகளில் இது குறிப்பாக முக்கியமானது.

            // Example using a framework like React
import React, { useEffect } from 'react';
import { sharedEventBus } from './sharedEventBus';

function OrderSummary({ orderId }) {
  useEffect(() => {
    const subscription = sharedEventBus.subscribe('order:statusUpdated', (data) => {
      if (data.orderId === orderId) {
        console.log('Order status updated:', data.status);
        // Update component state based on new status
      }
    });

    // Cleanup function: unsubscribe when the component unmounts
    return () => {
      subscription(); // This calls the unsubscribe function returned by subscribe
    };
  }, [orderId]); // Re-subscribe if orderId changes

  return (
    

      
Order #{orderId}
      {/* ... order details ... */}
    
  );
}

            

              
                Copy
              
            
          

4. பிழைகளை நளினமாகக் கையாளுதல்

ஒரு சந்தாதாரர் ஒரு பிழையை வீசினால் என்ன நடக்கும்? நிகழ்வு பஸ் செயலாக்கம் மற்ற சந்தாதாரர்களின் செயலாக்கத்தை நிறுத்தக்கூடாது. மீள்தன்மையை உறுதிப்படுத்த, கால்பேக் அழைப்புகளைச் சுற்றி `try...catch` தொகுதிகளை செயல்படுத்தவும்.

5. நிகழ்வின் நுணுக்கத்தைக் கருத்தில் கொள்ளுதல்

அதிகப்படியான தரவை வெளியிடும் அல்லது மிக அடிக்கடி வெளியிடும் மிகவும் பரந்த நிகழ்வுகளை உருவாக்குவதைத் தவிர்க்கவும். மாறாக, மிகவும் குறிப்பிட்ட மற்றும் நிகழ்வு வகைகளின் பெருக்கத்திற்கு வழிவகுக்கும் நிகழ்வுகளை உருவாக்க வேண்டாம்.

• மிகவும் பரந்த: dataChanged போன்ற ஒரு நிகழ்வு உதவாது.
• மிகவும் குறிப்பிட்ட: productNameChanged, productPriceChanged, productDescriptionChanged ஆகியவை ஒரே product:updated நிகழ்வாகப் பிரிக்கப்பட்டு, என்ன மாறியது என்பதைக் குறிக்கும் குறிப்பிட்ட புலங்களுடன் இருக்கலாம் அல்லது தரவைச் சொந்தமான பயன்பாட்டால் கையாளப்படலாம்.

உங்கள் கணினியில் அர்த்தமுள்ள நிலை மாற்றங்கள் அல்லது செயல்களைப் பிரதிபலிக்கும் ஒரு சமநிலைக்கு பாடுபடுங்கள்.

6. நிகழ்வுகளின் பதிப்பிடல்

உங்கள் மைக்ரோ-ஃபிரன்ட்எண்ட் கட்டமைப்பு உருவாகும்போது, நிகழ்வு கட்டமைப்புகள் மாற வேண்டியிருக்கும். உங்கள் நிகழ்வுகளுக்கு ஒரு பதிப்பீட்டு உத்தியைக் கருத்தில் கொள்ளுங்கள், குறிப்பாக வெளிப்புற செய்தி தரகர்களைப் பயன்படுத்தினால் அல்லது புதுப்பிப்புகளின் போது வேலையில்லா நேரம் ஒரு விருப்பமாக இல்லாவிட்டால்.

7. ஒரு பகிரப்பட்ட சார்பாக குளோபல் நிகழ்வு பஸ்

ஒரு பகிரப்பட்ட ஜாவாஸ்கிரிப்ட் நிகழ்வு உமிழ்ப்பானைப் பயன்படுத்தினால், அது உங்கள் எல்லா மைக்ரோ-ஃபிரன்ட்எண்ட்களிலும் உண்மையிலேயே பகிரப்படுவதை உறுதிப்படுத்தவும். வெப் பேக் மாட்யூல் ஃபெடரேஷன் போன்ற தொழில்நுட்பங்கள், தொகுதிகளை உலகளவில் வெளிப்படுத்தவும் நுகரவும் உங்களை அனுமதிப்பதன் மூலம் இதை எளிதாக்குகின்றன.

            // webpack.config.js (in host application)
module.exports = {
  //...
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        catalogApp: 'catalogApp@http://localhost:3001/remoteEntry.js',
        cartApp: 'cartApp@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        './src/sharedEventBus': { 
          singleton: true, 
          eager: true // Load immediately
        }
      }
    })
  ]
};

// webpack.config.js (in micro-frontend 'catalogApp')
module.exports = {
  //...
  plugins: [
    new ModuleFederationPlugin({
      name: 'catalogApp',
      filename: 'remoteEntry.js',
      exposes: {
        './CatalogApp': './src/bootstrap',
        './SharedEventBus': './src/sharedEventBus'
      },
      shared: {
        './src/sharedEventBus': {
          singleton: true,
          eager: true
        }
      }
    })
  ]
};

            

              
                Copy
              
            
          

ஒரு நிகழ்வு பஸ்ஸை எப்போது பயன்படுத்தக்கூடாது

சக்திவாய்ந்ததாக இருந்தாலும், ஒரு நிகழ்வு பஸ் அனைத்து தகவல்தொடர்பு தேவைகளுக்கும் ஒரு வெள்ளித் தோட்டாவாக இல்லை. இது நிகழ்வுகளை ஒளிபரப்புவதற்கும் பக்க விளைவுகளைக் கையாளுவதற்கும் மிகவும் பொருத்தமானது. இது பொதுவாக இதற்கு சிறந்த முறை அல்ல:

• நேரடி கோரிக்கை/பதில் (Direct Request/Response): மைக்ரோ-ஃபிரன்ட்எண்ட் A-க்கு மைக்ரோ-ஃபிரன்ட்எண்ட் B-யிலிருந்து ஒரு குறிப்பிட்ட தரவு தேவைப்பட்டு, அந்தத் தரவிற்காக உடனடியாகக் காத்திருக்க வேண்டுமானால், ஒரு நிகழ்வை ஏவி பதிலுக்காக நம்புவதை விட, ஒரு நேரடி API அழைப்பு அல்லது பகிரப்பட்ட நிலை மேலாண்மை தீர்வு மிகவும் பொருத்தமானதாக இருக்கலாம்.
• சிக்கலான நிலை மேலாண்மை (Complex State Management): பல மைக்ரோ-ஃபிரன்ட்எண்ட்களில் சிக்கலான பகிரப்பட்ட பயன்பாட்டு நிலையை நிர்வகிக்க, ஒரு பிரத்யேக நிலை மேலாண்மை நூலகம் (அதன் சொந்த நிகழ்வு அல்லது சந்தா மாதிரியுடன்) மிகவும் பொருத்தமானதாக இருக்கலாம்.
• முக்கியமான ஒத்திசைவான செயல்பாடுகள் (Critical Synchronous Operations): உடனடி, ஒத்திசைவான ஒருங்கிணைப்பு தேவைப்பட்டால், ஒரு நிகழ்வு பஸ்ஸின் ஒத்திசைவற்ற தன்மை ஒரு குறைபாடாக இருக்கலாம்.

மைக்ரோ-ஃபிரன்ட்எண்ட்களில் மாற்று தகவல்தொடர்பு முறைகள்

நிகழ்வு பஸ் மைக்ரோ-ஃபிரன்ட்எண்ட் தகவல்தொடர்பு கருவிப்பெட்டியில் உள்ள ஒரு கருவி மட்டுமே என்பது குறிப்பிடத்தக்கது. பிற முறைகள் அடங்கும்:

• பகிரப்பட்ட நிலை மேலாண்மை (Shared State Management): Redux, Vuex, அல்லது Zustand போன்ற நூலகங்கள் பொதுவான நிலையை நிர்வகிக்க மைக்ரோ-ஃபிரன்ட்எண்ட்களிடையே பகிரப்படலாம்.
• ப்ராப்ஸ் மற்றும் கால்பேக்குகள் (Props and Callbacks): ஒரு மைக்ரோ-ஃபிரன்ட்எண்ட் மற்றொன்றில் நேரடியாக உட்பொதிக்கப்பட்டிருக்கும்போது (எ.கா., வெப் பேக் மாட்யூல் ஃபெடரேஷனைப் பயன்படுத்தி), நேரடி ப்ராப் அனுப்புதல் மற்றும் கால்பேக்குகள் பயன்படுத்தப்படலாம், இருப்பினும் இது இணைப்பை அறிமுகப்படுத்துகிறது.
• வெப் கூறுகள்/தனிப்பயன் கூறுகள் (Web Components/Custom Elements): செயல்பாட்டை உள்ளடக்கலாம் மற்றும் தகவல்தொடர்புக்காக தனிப்பயன் நிகழ்வுகள் மற்றும் பண்புகளை வெளிப்படுத்தலாம்.
• வழித்தடம் மற்றும் URL அளவுருக்கள் (Routing and URL Parameters): URL மூலம் நிலையைப் பகிர்வது தொடர்புகொள்வதற்கான ஒரு எளிய, நிலையற்ற வழியாகும்.

பெரும்பாலும், இந்த முறைகளின் கலவையானது ஒரு விரிவான மைக்ரோ-ஃபிரன்ட்எண்ட் கட்டமைப்பை உருவாக்கப் பயன்படுகிறது.

உலகளாவிய உதாரணங்கள் மற்றும் பரிசீலனைகள்

ஒரு உலகளாவிய பார்வையாளர்களுக்காக ஒரு மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ்ஸை உருவாக்கும்போது, இந்தக் குறிப்புகளைக் கருத்தில் கொள்ளுங்கள்:

• நேர மண்டலங்கள் (Time Zones): நிகழ்வுகளில் உள்ள எந்த நேர முத்திரை தரவும் உலகளவில் புரிந்து கொள்ளப்பட்ட வடிவத்தில் (ISO 8601 உடன் UTC போன்றவை) இருப்பதை உறுதிசெய்து, நுகர்வோர் அதை எவ்வாறு விளக்குவது என்பது பற்றி அறிந்திருப்பதை உறுதிப்படுத்தவும்.
• உள்ளூர்மயமாக்கல்/சர்வதேசமயமாக்கல் (i18n): நிகழ்வுகள் பொதுவாக UI உரையைக் கொண்டிருக்காது, ஆனால் அவை UI புதுப்பிப்புகளைத் தூண்டினால், அந்தப் புதுப்பிப்புகள் உள்ளூர்மயமாக்கப்பட வேண்டும். நிகழ்வு தரவு மொழியற்றதாக இருக்க வேண்டும்.
• நாணயம் மற்றும் அலகுகள் (Currency and Units): நிகழ்வுகள் பண மதிப்புகள் அல்லது அளவீடுகளை உள்ளடக்கியிருந்தால், நாணயம் அல்லது அலகு பற்றி வெளிப்படையாக இருங்கள், அல்லது அவற்றை இடமளிக்கும் வகையில் பேலோடை வடிவமைக்கவும்.
• பிராந்திய ஒழுங்குமுறைகள் (எ.கா., GDPR, CCPA): நிகழ்வுகள் தனிப்பட்ட தரவைக் கொண்டிருந்தால், நிகழ்வு பஸ் செயலாக்கம் மற்றும் சம்பந்தப்பட்ட மைக்ரோ-ஃபிரன்ட்எண்ட்கள் தொடர்புடைய தரவு தனியுரிமை விதிமுறைகளுக்கு இணங்குவதை உறுதிசெய்யவும். தரவு சட்டபூர்வமான தேவை உள்ள மற்றும் பொருத்தமான ஒப்புதல் பொறிமுறைகளைக் கொண்ட சந்தாதாரர்களுக்கு மட்டுமே வெளியிடப்படுவதை உறுதிசெய்யவும்.
• செயல்திறன் மற்றும் அலைவரிசை (Performance and Bandwidth): மெதுவான இணைய இணைப்புகளைக் கொண்ட பிராந்தியங்களில் உள்ள பயனர்களுக்கு, அதிகப்படியான அரட்டை நிகழ்வு முறைகள் அல்லது பெரிய நிகழ்வு பேலோடுகளைத் தவிர்க்கவும். தரவு பரிமாற்றத்தை மேம்படுத்தவும்.

முடிவுரை

ஃபிரன்ட்எண்ட் மைக்ரோ-ஃபிரன்ட்எண்ட் நிகழ்வு பஸ் என்பது சுயாதீனமான மைக்ரோ-ஃபிரன்ட்எண்ட் பயன்பாடுகளுக்கு இடையில் தடையற்ற, துண்டிக்கப்பட்ட தகவல்தொடர்பை செயல்படுத்துவதற்கான ஒரு தவிர்க்க முடியாத முறையாகும். வெளியீடு-சந்தா மாதிரியை ஏற்றுக்கொள்வதன் மூலம், வளர்ச்சி குழுக்கள் சுறுசுறுப்பு மற்றும் குழு சுயாட்சியைப் பராமரிக்கும் அதே வேளையில் சிக்கலான, அளவிடக்கூடிய வலை பயன்பாடுகளை உருவாக்க முடியும்.

நீங்கள் ஒரு எளிய குளோபல் நிகழ்வு உமிழ்ப்பானைத் தேர்வுசெய்தாலும், தனிப்பயன் DOM நிகழ்வுகளைப் பயன்படுத்தினாலும், அல்லது வலுவான வெளிப்புற செய்தி தரகர்களுடன் ஒருங்கிணைத்தாலும், முக்கியமானது தெளிவான ஒப்பந்தங்களை வரையறுப்பது, நிலையான மரபுகளை நிறுவுவது மற்றும் உங்கள் நிகழ்வு கேட்பவர்களின் வாழ்க்கைச் சுழற்சியை நுணுக்கமாக நிர்வகிப்பது ஆகியவற்றில் உள்ளது. ஒரு நன்கு செயல்படுத்தப்பட்ட நிகழ்வு பஸ் உங்கள் மைக்ரோ-ஃபிரன்ட்எண்ட்களை தனிமைப்படுத்தப்பட்ட கூறுகளிலிருந்து ஒரு ஒருங்கிணைந்த, மாறும் மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவமாக மாற்றுகிறது.

உங்கள் அடுத்த மைக்ரோ-ஃபிரன்ட்எண்ட் முயற்சியை நீங்கள் வடிவமைக்கும்போது, தளர்வான இணைப்பு மற்றும் அளவிடுதலை ஊக்குவிக்கும் தகவல்தொடர்பு உத்திகளுக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள். நிகழ்வு பஸ், சிந்தனையுடன் பயன்படுத்தும்போது, உங்கள் வெற்றியின் மூலக்கல்லாக இருக்கும்.